<template>
    <div>

        <Hearder title="相册库管理" listName="相册库列表"></Hearder>

        <!--查询表单-->
        <el-form :inline="true" >
            <el-form-item label="相册名称">
               <el-input v-model="searchMap.title" placeholder="相册名称" class="filter-item" >         
               </el-input>
           </el-form-item>
           
           <el-button class="dalfBut" @click="fetchData()">查询</el-button>
           <el-button type="primary"  class="butT" @click="formVisible=true;pojo={}">新增</el-button>
       </el-form>
       

       <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="编号" width="80"></el-table-column>
          <el-table-column prop="title" label="相册名称" width="80"></el-table-column>
          <el-table-column label="相册封面" width="80">
            <template slot-scope="scope">
                <img :src="scope.row.image" alt="" style="height: 3rem">
            </template>
        </el-table-column>
        <el-table-column prop="" label="数量" width="80"></el-table-column>
        <el-table-column prop="seq" label="排序" width="80"></el-table-column>
        <el-table-column prop="" label="描述" width="80"></el-table-column>

        <el-table-column label="操作"  >
            <template slot-scope="scope">
             <el-button @click="$router.push('/album/albumList/'+scope.row.id)" size="mini" type="primary">查看
             </el-button>
             <el-button @click="edit(scope.row.id)" size="mini" type="primary">修改
             </el-button>
             <el-button @click="dele(scope.row.id)" size="mini" type="danger">删除
             </el-button>
         </template>
     </el-table-column>
 </el-table>
 
 <!-- 分頁 -->
 <el-pagination layout="total,prev, pager, next,jumper" :total="total" :page-size="pageSize" @current-change="fetchData"
 @size-change="fetchData"
 :current-page.sync="currentPage"
 >
</el-pagination>
<!--弹出窗口-->
<el-dialog  title="编辑" :visible.sync="formVisible" >
    <el-form label-width="80px">
        <el-form-item label="相册名称"><el-input v-model="pojo.title"></el-input></el-form-item>
        <el-form-item label="相册封面"><el-input v-model="pojo.image"></el-input></el-form-item>
        <el-form-item label="图片列表"><el-input v-model="pojo.imageItems"></el-input></el-form-item>

        <el-form-item>
            <el-button type="primary" @click="save()">保存</el-button>
            <el-button @click="formVisible = false" >关闭</el-button>
        </el-form-item>
    </el-form>
</el-dialog>
</div>
</template>

<script>
    export default {


        data(){
            return {
                tableData: [],
                currentPage: 1,
                total: 10,
                pageSize: 10,
                searchMap: {},
                pojo: {},
                formVisible: false,
                imageUrl: ''
            }
        },
        created(){
            this.fetchData();
        },
        methods:{
            fetchData (){
                axios.post(`/album/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(response => {
                    this.tableData = response.data.rows;
                    this.total = response.data.total;
                });
            },
            save (){
                // this.pojo.image= this.imageUrl; //如页面有图片上传功能放开注释
                axios.post(`/album/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response => {
                    this.fetchData (); //刷新列表
                    this.formVisible = false ;//关闭窗口
                });
            },
            edit (id){
                this.formVisible = true // 打开窗口
                // 调用查询
                axios.get(`/album/findById.do?id=${id}`).then(response => {
                    this.pojo = response.data;
                    // this.imageUrl=this.pojo.image //显示图片  如页面有图片上传功能放开注释
                })
            },
            dele (id){
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( () => {
                    axios.get(`/album/delete.do?id=${id}`).then(response => {
                        this.fetchData (); //刷新列表
                    })
                })
            },
			/* ****图片上传相关代码  如页面有图片上传功能放开注释 **** 
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }*/
        }
    }   
</script>

<!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 70px;
    line-height: 150px;
    text-align: center;
}
.avatar {
    width: 150px;
    height: 70px;
    display: block;
}

</style>